<template>
  <div class="page-head">
    <a class="go-back" href="javascript:;" @click="backToList">
      返回频道列表界面
      <i class="el-icon-back" />
    </a>
    <div class="page-operate">
      <el-button
        type="primary"
        size="medium"
        :loading="saveLoading"
        @click="saveAndContinue"
      >
        保存
      </el-button>
      <el-button size="medium" :loading="previewLoading" @click="saveAndView">
        预览
      </el-button>
    </div>
  </div>
</template>

<script>
import { saveCmsPage } from "@/api/activity";
import { mixins } from "@/mixin/index";
export default {
  mixins: [mixins],
  name: "PageHead",
  data() {
    return {
      saveLoading: false,
      previewLoading: false,
    };
  },
  computed: {
    pageData() {
      return this.$store.state.pageData;
    },
  },
  methods: {
    backToList() {
      try {
        let isParentActivityPage =
          window.opener && window.opener.loaction.hash === "#/activity";
        if (isParentActivityPage) {
          window.opener.close(); // 父级窗口关闭
        }
        this.$router.push("/activity");
      } catch (error) {
        this.$router.push("/activity");
      }
    },
    saveAndContinue() {
      this.saveLoading = true;
      this.savePage()
        .then(() => {
          this.$message.success("保存成功");  
          this.saveLoading = false;
          this.addLogList({
             id:this.pageData.id,
             name:this.pageData.name,
             creator:window.localStorage.getItem("username"),
             is_abled:0,
          },`${this.pageData.name}页面保存成功`)
        })
        .catch((err) => {
          this.addLogList({
             id:this.pageData.id,
             name:this.pageData.name,
             creator:window.localStorage.getItem("username"),
             is_abled:0,
          },`${this.pageData.name}页面保存失败`)
          this.$message(`保存失败：${err.message}`);
          this.saveLoading = false;
        });
    },
    saveAndView() {
      this.previewLoading = true;
      this.savePage({ online: 1 })
        .then((res) => {
          this.$message.success("上架成功");
          let id = res && res.data ? res.data.id : "";
          if (id) {
            this.$router.push(`/decorate?id=${id}`);
          } else {
            id = this.$route.query.id;
          }
          this.goToView(id);
          this.addLogList({
             id:id,
             name:this.pageData.name,
             creator:window.localStorage.getItem("username"),
             is_abled:0,
          },`预览：${this.pageData.name}`)
        })
        .catch((err) => {
          this.$message.warning(`上架并预览失败：${err.message}`);
          this.previewLoading = false;
          this.addLogList({
             id:id,
             name:this.pageData.name,
             creator:window.localStorage.getItem("username"),
             is_abled:0,
          },`预览失败：${this.pageData.name}`)
        });
    },
    savePage(params) {
      let creator = window.localStorage.getItem("username");
      let pageData = { ...this.pageData, params, creator };
      pageData.componentList.forEach((item, index) => {
        item.sort = index;
      });
      return saveCmsPage(pageData).then((res) => {
        if (res && res.data && res.data.id) {
          // 调用新增的方法
          this.setIdForAddSave(res.data.id);
        }
        return res;
      });
    },
    setIdForAddSave(id) {
      this.$router.push(`/decorate?id=${id}`);
      let pageData = { ...this.pageData };
      pageData.id = id;
      this.$store.commit("UPDATE_COMPONENT", { data: pageData });
    },
    goToView(id) {
      let urlObj = this.$router.resolve({
        path: "preview",
        query: { id },
      });
      window.open(urlObj.href, "_blank");
      this.previewLoading = false;
    },
  },
};
</script>

<style lang="less" scoped>
.page-head {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: @page-header-height;
  background: #fff;
  border-bottom: 1px solid #ebedf0;
  padding: 0px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .go-back {
    float: left;
    line-height: 55px;
    font-size: 14px;
    color: #4f4f4f;
    cursor: pointer;
    .logo {
      display: inline-block;
      vertical-align: middle;
      margin: -2px 4px 0 0;
      max-width: 30px;
      max-height: 30px;
    }
  }
}
</style>
